<template>
      <scroll class="listview"
              :data="data"
              :probeType="probeType"
              :listenScroll="listenScroll"
              @scroll="scroll"
              ref="listview"
      >
          <ul>
            <li v-for="group in data" class="list-group" ref="listgroup">
                <h2 class="list-group-title">{{group.title}}</h2>
                <ul>
                  <li class="list-group-item"
                      v-for=" (item,index) in group.items"
                  >
                    <img class="avatar" v-lazy="item.avatar" alt="">
                    <span class="name">{{item.name}}</span>
                  </li>
                </ul>
            </li>
          </ul>
          <div class="list-shortcut" @touchstart="touchstartShortcut" @touchmove="touchmoveShortcut">
            <ul>
              <li v-for="(item,index) in shortcutList"
                  class="item"
                  :data-index="index"
                  :class="{'current':currentIndex===index}"
              >{{item}}</li>
            </ul>
          </div>
      </scroll>
</template>
<script type="text/ecmascript-6">
  import Scroll from 'base/scroll/scroll'
  import lazyload from 'vue-lazyload'
  import {getData} from 'common/js/dom'
  //定义每个锚点的高度
  const ANCHOR_HEIGHT=18;
  export default {
    created(){
      this.touch={};
      this.listenScroll=true;
      this.listHeight=[]
      this.probeType=3
    },
    data(){
      return {
          ScrollY:-1,//当前点的位置
          currentIndex:0//高亮的下标
      }
    },
    watch:{
        data(){
          setTimeout(()=>{
            this._calculateHeight()
          },20)
        },
        ScrollY(newY){
            const listHeight = this.listHeight
            for(let i=0;i<listHeight.length;i++){
                let lowerHeight  = listHeight[i]
                let higherHeight = listHeight[i+1]
                if(!higherHeight || lowerHeight< -newY && higherHeight>-newY){
                    this.currentIndex=i
                    return
                }
            }
            this.currentIndex=0;
        }
    },
    props: {
      data: {
        type: Array,
        default: []
      }
    },
    components:{
      Scroll,
      lazyload
    },
    computed:{
      shortcutList(){
        return this.data.map((group)=>{
          return group.title.substr(0,1);
        })
      }
    },
    methods:{
      touchstartShortcut(e){
          let anchorIndex = getData(e.target,'index')
          let firstTouch=e.touches[0]
          this.touch.y1=firstTouch.pageY
          this.touch.anchorIndex=anchorIndex
          this._scrollTo(anchorIndex)
      },
      touchmoveShortcut(e){
        let firstTouch=e.touches[0].pageY
        this.touch.y2=firstTouch
        let delta =parseInt((this.touch.y2-this.touch.y1))/ANCHOR_HEIGHT
        let anchorIndex=parseInt(this.touch.anchorIndex)+Math.floor(delta)
        console.log(anchorIndex);
        this._scrollTo(anchorIndex)
      },
      scroll(pos){
        this.ScrollY=pos.y
      },
      _scrollTo(index){
        this.$refs.listview.scrollToElement(this.$refs.listgroup[index],0)
      },
      _calculateHeight(){
            //计算每个分组的clientHeight
        this.listHeight=[]
        const list = this.$refs.listgroup
        let height=0
        this.listHeight.push(height)
        for(let i=0;i<list.length;i++){
          height+=list[i].clientHeight
          this.listHeight.push(height)
        }

      }
    }
  }
</script>
<style scoped lang="scss" rel="stylesheet/css">
  @import "~common/scss/variable";

  .listview{
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: $color-background;
  }

  .list-group{
    padding-bottom: 30px;
    .list-group-title{
    height: 30px;
    line-height: 30px;
    padding-left: 20px;
    font-size: $font-size-small;
    color: $color-text-l;
    background: $color-highlight-background;
    }
  }

  .list-group-item {
    display: flex;
    align-items: center;
    padding: 20px 0 0 30px;
  }
    .avatar {
      width: 50px;
      height: 50px;
      border-radius: 50%;
    }
    .name{
    margin-left: 20px;
    color: $color-text-l;
    font-size: $font-size-medium;
  }

  .list-shortcut{
    position: absolute;
    z-index: 30;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    padding: 20px 0;
    border-radius: 10px;
    text-align: center;
    background: $color-background-d;
    font-family: Helvetica;
  }

  .item{
    padding: 3px;
    line-height: 1;
    color: $color-text-l;
    font-size: $font-size-small;
    &.current{
    color: $color-theme;
    }
  }

  .list-fixed{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    .fixed-title{
    height: 30px;
    line-height: 30px;
    padding-left: 20px;
    font-size: $font-size-small;
    color: $color-text-l;
    background: $color-highlight-background;
    }
  }

  .loading-container{
    position: absolute;
    width: 100%;
    top: 50%;
    transform: translateY(-50%);
  }

</style>
